
<!-- shooting_game/frontend/contact.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>联系我 - 校园创意工作室</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animation.css">
  <style>
    .postcard {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      transform: rotate(-2deg);
      position: relative;
      overflow: hidden;
    }
    .postcard::before {
      content: '';
      position: absolute;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 30px;
      background: #ff6b6b;
      border-radius: 5px;
      transform: rotate(5deg);
    }
    .postcard-stamp {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 60px;
      height: 80px;
      background: url('https://picsum.photos/120/160?grayscale');
      background-size: cover;
      border-radius: 5px;
      transform: rotate(5deg);
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    .postcard-line {
      height: 2px;
      background: repeating-linear-gradient(to right, #ccc, #ccc 5px, transparent 5px, transparent 10px);
    }
    .contact-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 0 auto;
      transition: all 0.3s;
    }
    .contact-icon:hover {
      transform: scale(1.1) rotate(10deg);
    }
    .input-field {
      border-bottom: 2px solid #ccc;
      transition: all 0.3s;
    }
    .input-field:focus {
      border-bottom-color: #4ecdc4;
    }
  </style>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="particles-js" class="fixed inset-0 z-0"></div>

  <!-- 导航栏 -->
  <nav class="relative z-10 bg-white bg-opacity-90 shadow-md">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="text-2xl font-bold text-pink-500">🎨 校园创意社</div>
        <div class="hidden md:flex space-x-8">
          <a href="index.html" class="nav-item transition duration-300 text-blue-600 font-medium">🏠 首页</a>
          <a href="works.html" class="nav-item transition duration-300 text-green-600 font-medium">📚 作品集</a>
          <a href="about.html" class="nav-item transition duration-300 text-purple-600 font-medium">👨‍🎓 关于我</a>
          <a href="#" class="nav-item transition duration-300 text-yellow-600 font-medium">📮 联系我</a>
        </div>
        <button class="md:hidden focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="relative z-10 py-16">
    <div class="container mx-auto px-4">
      <!-- 明信片标题 -->
      <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-bold text-pink-600 mb-4">📬 给我留言</h1>
        <p class="text-xl text-gray-600 max-w-2xl mx-auto">期待与你交流创意想法，一起创造更多校园精彩</p>
      </div>

      <div class="max-w-4xl mx-auto">
        <!-- 明信片设计 -->
        <div class="postcard p-8 md:p-12 mb-16">
          <div class="postcard-stamp"></div>
          
          <h2 class="text-3xl font-bold text-blue-600 mb-6 flex items-center">
            <span class="mr-3">✉️</span> 发送消息
          </h2>
          
          <div class="postcard-line mb-8"></div>
          
          <form class="space-y-6">
            <div>
              <label class="block text-gray-700 mb-2">你的名字</label>
              <input type="text" class="input-field w-full py-2 px-1 focus:outline-none" placeholder="小明同学">
            </div>
            
            <div>
              <label class="block text-gray-700 mb-2">电子邮箱</label>
              <input type="email" class="input-field w-full py-2 px-1 focus:outline-none" placeholder="example@school.com">
            </div>
            
            <div>
              <label class="block text-gray-700 mb-2">留言内容</label>
              <textarea class="input-field w-full py-2 px-1 focus:outline-none h-32" placeholder="写下你想说的话..."></textarea>
            </div>
            
            <button type="submit" class="px-8 py-3 bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-full font-bold hover:shadow-lg transition duration-300">
              发送留言 ✈️
            </button>
          </form>
        </div>

        <!-- 联系方式 -->
        <div class="text-center">
          <h2 class="text-3xl font-bold text-green-600 mb-12">📱 其他联系方式</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 微信 -->
            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300">
              <div class="contact-icon bg-green-100 text-green-600 mb-4">
                📱
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">微信</h3>
              <p class="text-gray-600">CampusCreative</p>
              <p class="text-gray-500 text-sm mt-2">扫码添加好友</p>
            </div>
            
            <!-- 邮箱 -->
            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300">
              <div class="contact-icon bg-blue-100 text-blue-600 mb-4">
                📧
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">电子邮箱</h3>
              <p class="text-gray-600">contact@campuscreative.com</p>
              <p class="text-gray-500 text-sm mt-2">24小时内回复</p>
            </div>
            
            <!-- B站 -->
            <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300">
              <div class="contact-icon bg-pink-100 text-pink-600 mb-4">
                🎵
              </div>
              <h3 class="text-xl font-bold text-gray-800 mb-2">B站</h3>
              <p class="text-gray-600">校园创意社</p>
              <p class="text-gray-500 text-sm mt-2">观看创意视频</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="relative z-10 bg-gray-800 text-white py-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-2xl font-bold text-pink-400">校园创意社</div>
          <p class="mt-2 text-gray-400">用创意点亮校园生活</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📱 微信</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🐦 微博</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📧 邮箱</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🎵 B站</a>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">
        <p>© 2025 校园创意工作室 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="js/main.js"></script>
  <script>
    // 粒子效果初始化
    particlesJS('particles-js', {
      particles: {
        number: { value: 60, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
      }
    });

    // 移动端菜单切换
    document.querySelector('button.md-hidden').addEventListener('click', function() {
      const nav = document.querySelector('.hidden.md\\:flex');
      nav.classList.toggle('hidden');
      nav.classList.toggle('flex');
      nav.classList.toggle('flex-col');
      nav.classList.toggle('absolute');
      nav.classList.toggle('top-16');
      nav.classList.toggle('left-0');
      nav.classList.toggle('right-0');
      nav.classList.toggle('bg-white');
      nav.classList.toggle('p-4');
      nav.classList.toggle('space-y-4');
      nav.classList.toggle('space-x-8');
      nav.classList.toggle('shadow-md');
    });

    // 表单提交
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      alert('感谢你的留言！我们会尽快回复你。');
      this.reset();
    });
  </script>
</body>
</html>
